<script setup>
import { ref, reactive } from 'vue';
import { Admin } from '@/api';
import { useRouter, useRoute } from 'vue-router';

// 编程式导航：获取router实例对象
let router = useRouter();
// 获取当前页的路由信息
let route = useRoute();

let form = ref({
    account: 'admin',
    pwd: '123456',
})

let rules = reactive({
    account: [
        // 非空验证
        { required: true, message: '请输入用户名！', trigger: 'blur' },
        // 有效性验证
        { min: 3, max: 36, message: '长度在 3 到 36 个字符', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '请输入密码！', trigger: 'blur' },
        { pattern: /^\d{3,}/, message: '密码至少3个数字', trigger: 'blur' }
    ],
})

// 登录
let form_ref = ref(null);
let handleLogin = () => {
    form_ref.value.validate(async (valid) => {
        if (valid) {
            // 通过验证
            let { status, msg, data } = await Admin.login({ ...form.value });
            if (status === 200) {
                // 缓存数据(接收后台返回的数据，防止后面有用)
                sessionStorage.id = data.user_info.id;
                sessionStorage.token = `Bearer ${data.token}`;
                // 信息提示
                ElMessage.success(msg);
                // 跳转页面
                let { redirect } = route.query;
                if (redirect) {
                    // 重定向
                    router.replace(redirect);
                } else {
                    // 默认跳转
                    router.push('/admin/home');
                }
            } else {
                // 信息提示
                ElMessage.error(msg);
            }
        }
    });
}
</script>

<template>
    <div class="bg">
        <div class="card">
            <el-card class="left-card" :body-style="{ padding: '0px' }">
                <el-image src='src\assets\img\sw.jpg' fit="cover" />
            </el-card>
            <el-card class="right-card">
                <div>
                    <el-image src='src\assets\img\logo.png' class="right-img" />
                    <el-form :model="form" :rules="rules" ref="form_ref" status-icon>
                        <el-form-item prop="account">
                            <el-input v-model="form.account" placeholder="请输入用户名">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <UserFilled />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="pwd">
                            <el-input v-model="form.pwd" placeholder="请输入密码" type="password">
                                <template #prefix>
                                    <el-icon class="el-input__icon">
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="handleLogin">登录</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<style lang="less" scoped>
.bg {
    height: 100vh;
    background: url('@/assets/img/bg.jpg') center no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
        display: flex;
        height: 400px;

        .left-card {
            font-size: 0;
            border-radius: 15px 0px 0px 15px;
            border: 0;
        }

        .right-card {
            display: flex;
            align-items: center;
            border-radius: 0px 15px 15px 0px;

            .right-img {
                width: 300px;
                margin-bottom: 30px;
            }

            button {
                margin-top: 20px;
                width: 100%;
            }
        }
    }
}
</style>